const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const path = require('path');
const moduleRules = (mode) => {
    const publicPath = mode === 'development' ? '/' : './'

    return {
        module: {
            rules: [
                {
                    test: require.resolve("jquery"),
                    loader: "expose-loader",
                    options: {
                        exposes: ["$", "jQuery"],
                    },
                },
                {
                    test: /\.(js|jsx)$/,
                    // use: ['babel-loader?cacheDirectory=true'],
                    include: path.resolve(__dirname, 'src')
                },
                {
                    test: /\.css$/i,
                    // use: ['style-loader', 'css-loader']
                    use: [
                        {
                            loader: MiniCssExtractPlugin.loader,
                            options: {
                                publicPath: '', // 这里根据实际情况调整，指向资源的公共基础路径
                            },
                        },
                        // 'style-loader',
                        {
                            loader: 'css-loader',
                            options: {
                                url: true, // 启用url处理，默认为true，但明确指定可增加可读性
                            }
                        },
                        'postcss-loader',
                    ]
                },
                {
                    test: /\.less$/,
                    use: [
                        MiniCssExtractPlugin.loader,
                        // {
                        //     loader: 'style-loader',
                        // },
                        {
                            loader: 'css-loader',
                            options: {
                                // 表示在 css-loader 之后，还有两个加载器（如 postcss-loader 和 sass-loader）会被应用到 @import 的 CSS 文件上
                                importLoaders: 2,
                            }
                        },
                        {
                            loader: 'postcss-loader',
                            options: {
                                sourceMap: true,
                            }
                        },
                        {
                            loader: 'less-loader',
                            options: {
                                sourceMap: true,
                            }
                        }
                    ]
                },
                // {
                //     test: /\.html$/,
                //     use: [
                //         {
                //             loader: 'html-loader',
                //             // options: {
                //             //     minimize: true
                //             // }
                //             options: {
                //                 //指定哪些属性的资源应该被处理，默认情况下所有资源都会被处理
                //                 // attributes: {
                //                 //     list: [
                //                 //         { tag: 'img', attribute: 'src', type: 'src' },
                //                 //         { tag: 'link', attribute: 'href', type: 'src' }, // 注意：对于<link>，可能需要根据实际用途选择不同的type
                //                 //     ],
                //                 // },
                //                 //开启HTML压缩，但这个选项在html-loader 1.3.2中可能不可用或需要额外配置
                //                 minimize: true
                //             }
                //         }
                //     ]
                // },
                {
                    test: /\.(png|jpe?g|gif|svg)$/i, // 匹配图片文件
                    use: [
                        {
                            loader: 'url-loader', // 首先尝试使用 url-loader
                            options: {
                                limit: 8192, // 8KB 以下的文件转为 base64 编码
                                fallback: 'file-loader', // 超过限制时使用 file-loader
                                name: 'images/[name].[hash:8].[ext]', // 输出文件的名称和路径
                                // outputPath: publicPath, // 输出目录，确保与CSS中引用的相对路径匹配
                                publicPath: '', // 公共URL路径，确保与服务器配置相匹配
                            },
                        },
                    ],
                },
                {
                    // 文件依赖配置项——字体图标
                    test: /\.(woff|woff2|svg|eot|ttf)$/,
                    use: [{
                        loader: 'file-loader',
                        options: {
                            limit: 8192,
                            name: 'fonts/[name].[ext]?[hash:8]',
                            publicPath: ''
                        },
                    }],
                }, {
                    // 文件依赖配置项——音频
                    test: /\.(wav|mp3|ogg)?$/,
                    use: [{
                        loader: 'file-loader',
                        options: {
                            limit: 8192,
                            name: 'audios/[name].[ext]?[hash:8]',
                            publicPath: ''
                        },
                    }],
                }, {
                    // 文件依赖配置项——视频
                    test: /\.(ogg|mpeg4|webm)?$/,
                    use: [{
                        loader: 'file-loader',
                        options: {
                            limit: 8192,
                            name: 'videos/[name].[ext]?[hash:8]',
                            publicPath: ''
                        },
                    }],
                },



            ]
        }

    }
}

module.exports = moduleRules
